<template>
  <link rel="stylesheet" href="/assets/css/profile.css" />

  <van-sticky>
    <van-nav-bar
      title="基本资料"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
  </van-sticky>

  <div class="user">
    <div class="user-image">
      <img :src="business.avatar_cdn" alt="" />
    </div>
  </div>

  <div class="form" style="overflow: hidden">
    <van-form @submit="onSubmit" label-align="right" colon>
      <van-cell-group inset>
        <van-field
          v-model="business.mobile"
          name="mobile"
          label="手机号"
          placeholder="手机号"
          :rules="[{ required: true, message: '请填写手机号' }]"
        />

        <van-field
          v-model="business.nickname"
          name="nickname"
          label="姓名"
          placeholder="姓名"
          :rules="[{ required: true, message: '请填写姓名' }]"
        />

        <van-field
          v-model="business.email"
          name="email"
          label="邮箱"
          placeholder="邮箱"
          :rules="[{ required: true, message: '请填写邮箱' }]"
        />

        <van-field
          v-model="business.password"
          type="password"
          name="password"
          label="密码"
          placeholder="密码为空即不修改"
        />

        <van-field
          label="性别"
          v-model="business.gender_text"
          is-link
          readonly
          placeholder="选择性别"
          @click="showGender = true"
        >
        </van-field>

        <van-popup
          v-model:show="showGender"
          :style="{ height: '45%' }"
          round
          position="bottom"
        >
          <van-picker
            title="选择性别"
            :columns="genderList"
            @confirm="onGenderConfirm"
            @cancel="showGender = false"
          />
        </van-popup>

        <van-field
          v-model="business.region_text"
          is-link
          readonly
          label="地区选择"
          placeholder="点击选择省市区"
          @click="showRegion = true"
          :rules="[{ required: true, message: '请选择地区' }]"
        />

        <van-popup v-model:show="showRegion" round position="bottom">
          <van-area
            :area-list="areaList"
            @confirm="onRegionConfirm"
            @cancel="showRegion = false"
          />
        </van-popup>

        <van-field name="avatar" label="头像">
          <template #input>
            <van-uploader v-model="avatar" max-count="1" />
          </template>
        </van-field>
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup>
//引入地区插件
import { areaList } from "@vant/area-data";
import { ref } from "vue";

const { proxy } = getCurrentInstance();

//返回上一级
const onClickLeft = () => {
  proxy.$router.back();
};

const business = ref(proxy.$business);
const showGender = ref(false);
const genderList = ref([
  { text: "保密", value: 0 },
  { text: "男", value: 1 },
  { text: "女", value: 2 },
]);

const avatar = ref([
  {
    url: business.value.avatar_cdn,
  },
]);

// 表单提交事件
const onSubmit = async (values) => {
  let data = {
    id: business.value.id,
    mobile: values.mobile,
    nickname: values.nickname,
    email: values.email,
    gender: business.value.gender,
    province: business.value.province,
    city: business.value.city,
    district: business.value.district,
  };

  if (values.password) {
    data.password = values.password;
  }

  let avatar = values.avatar[0]?.file;

  if (avatar) {
    data.avatar = avatar;
  }

  console.log(data);

  let result = await proxy.$upload({
    url: "business/base/profile",
    params: data,
  });

  if (result.code === 1) {
    proxy.$NotifySuccess({
      msg: result.msg,
      onClose: () => {
        proxy.$cookies.set("business", result.data);

        proxy.$router.push("/business/base/index");
      },
    });

    return false;
  } else {
    proxy.$NotifyWarn(result.msg);

    return false;
  }
};

//地区设置
const showRegion = ref(false);
// 选择地区
const onRegionConfirm = ({ _, selectedOptions }) => {
  let [province, city, district] = selectedOptions;

  let RegionText = "";

  if (province.value) {
    RegionText = province.text + "-";
    business.value.province = province.value;
  }

  if (city.value) {
    RegionText += city.text + "-";
    business.value.city = city.value;
  }

  if (district.value) {
    RegionText += district.text;
    business.value.district = district.value;
  }

  business.value.region_text = RegionText;

  showRegion.value = false;
};

// 选择性别
const onGenderConfirm = ({ _, selectedOptions }) => {
  if (selectedOptions.length <= 0) {
    return false;
  }

  business.value.gender = selectedOptions[0].value;
  business.value.gender_text = selectedOptions[0].text;

  showGender.value = false;
};
</script>